<template>
  <div class="page-grey">
    <div class="top">
      <span @click="$router.back()">
        <svg-icon icon-class="back" class="icon" />
      </span>
      <span class="center">抢单</span>
    </div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="wallet">
        <p class="w-top">
          <span>
            <img src="../../assets/images/w-icon2.png" />
            余额：5000.00
          </span>
          <span class="rate">佣金：0.3%</span>
        </p>
        <p class="w-top">
          <span>
            <img src="../../assets/images/w-icon1.png" />
            已抢佣金：5000.00
          </span>
        </p>
        <p class="w-top">
          <span>
            <img src="../../assets/images/w-icon3.png" />
            账户冻结金额：5000.00
          </span>
        </p>
        <p>今日抢单数：1</p>
      </div>
      <van-button class="big-btn" @click="handleStart" :disabled="disabled">
        {{ startText }}
      </van-button>
      <div class="big-btn grey" @click="stop">停 止 抢 单</div>
      <div class="desc">
        <p class="tit">备注说明</p>
        <p class="txt">
          平台将订单匹配给用户的同时，平台将该笔订单的信息提交到商家后台，若用户在两分钟之内不提交订单，为了规避网购平台的监管，该笔订单会被冻结。订单冻结后，该笔订单资金也会被冻结，需等待系统24小时自行解冻，请各位用户知悉。
        </p>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startText: "开 始 抢 单",
      timer: 5,
      isLoading: false,
      disabled: false
    };
  },
  methods: {
    handleStart() {
      let flag = Math.random();
      if (flag < 0.5) {
        // 模拟抢单成功
        this.disabled = false;
        this.$router.push({ name: "orderDetail", params: { id: 1 } });
      } else {
        // 模拟抢单失败
        this.disabled = true;
        this.$toast("抢单失败");
        this.reStart();
      }
    },
    reStart() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.onRefresh();
        }, 5000);
      });
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.disabled = false;
      }, 1000);
    },
    stop() {
      this.$toast("已停止抢单");
    }
  }
};
</script>

<style lang="scss" scoped>
.big-btn {
  width: 80%;
  margin: 15px 10%;
  &.grey {
    background-color: #a09f9f !important;
    margin-top: 0;
  }
}
.van-pull-refresh {
  min-height: 80vh;
}
.desc {
  width: 80%;
  background-color: #fff;
  margin: 20px auto;
  padding: 15px 10px;
  box-sizing: border-box;
  border-radius: 10px;
  .tit {
    font-size: 120%;
    font-weight: 600;
    color: #85a5cd;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 10px;
  }
  .txt {
    color: #888;
    line-height: 1.5;
    text-align: justify;
  }
}
</style>
